<template>
    <div class="detail">
<!--        <div class="send">-->
        <div class="buttomReply" v-if="!$store.state.isReplyShow">

                <van-col span="15">
                    <div class="leftReplyInput">
                        <div class="imgAvatar">
                            <img :src="$store.state.userInfo.avatar" alt="">
                        </div>
                    </div>
                    <input type="text" class="replyInput" v-model="inputComment" placeholder="我来聊两句">
                </van-col>
                <van-col span="6">
<!--                    <button @click="tijiao">发表</button>-->
                    <button @click="tijiao" class="publication">发表</button>
                </van-col>
                <van-col span="2">
                    <span v-clipboard:copy="url"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">
                        <van-icon name="share" />
                    </span>
                </van-col>

            </div>
<!--        </div>-->

        <DetailHeader class="DetailHeader"></DetailHeader>
        <DetailContent class="DetailContent"></DetailContent>
        <DetailCommit :key="mineKey"></DetailCommit>



    </div>
</template>

<script>
    import { Dialog,Toast} from 'vant';
    import DetailContent from '../components/DetailContent'
    import DetailHeader  from "../components/DetailHeader"
    import DetailCommit from '../components/DetailCommit'
    import {addComment, getinformain} from "../api/api";
    export default {
        name: "Detail",
        data(){
            return {
                show: false,
                query:this.$route.query.postsId,
                container: null,
                inputComment:'',
                mineKey:'0',
                detailList:'',
                loading: true,
                url:''
            }
        },
        components:{
            DetailContent,
            DetailHeader,
            DetailCommit,
        },
        mounted() {
            // this.container = this.$refs.container;
            this.loading = false;
        },
        methods:{
            onCopy: function (e) {
                console.log(e)
                Dialog.alert({
                    message:"成功复制到剪切板，去分享吧!",
                    theme: 'round-button',
                }).then(() => {
                });
                // alert('成功复制到剪切板，去分享吧!')
            },
            onError: function (e) {
                console.log(e)
                Dialog.alert({
                    message:"分享失败!",
                    theme: 'round-button',
                }).then(() => {
                });
            },
            tijiao(){

                const tijiaoToast = Toast.loading({
                    duration:0,
                    message: '发表中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                    addComment(this.$route.query.postsId,this.inputComment).then(res => {
                        tijiaoToast.clear()
                        if(res.data.code == 403){
                            Dialog.confirm({
                                message: '还未登录，去登录？',
                            })
                                .then(() => {
                                    // on confirm
                                    this.$router.push('/pwdlogin')
                                })
                                .catch(() => {
                                    // on cancel
                                });
                        }else{
                            // Notify({type: 'success',message:'发表成功'});
                            // alert('发表成功')
                            Toast.success("发表成功");
                            tijiaoToast.clear()
                            this.inputComment = ''
                            this.mineKey++
                        }

                    })

            }
        },
        created() {
            this.url = window.location.href
            console.log(this.url)
            getinformain().then(res=>{
                console.log(res)
                if(res.data.code==0){
                    this.$store.commit("changeUserInfo",{userInfo:res.data.data})
                }
            })
        }
    }
</script>

<style scoped>
    .detail{
        padding: 52px 10px 46px 10px;
        box-sizing: border-box;
    }
    .DetailHeader{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /*border-bottom: 1px solid #ddd;*/
        box-shadow: 2px 2px 3px #eee;
        font-size: 28px;
        height: 32px;
        background-color: white;
        z-index: 3000;
        padding: 10px 6px;
        /*text-align: center;*/
        line-height: 32px;
    }
    .DetailContent{
        margin: 10px 0 16px 0;
    }
    .buttomReply{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 10px;
        text-align: center;
        /*border-top: 1px solid #ccc;*/
        box-shadow: 0px -2px 3px #ccc;
        width: 100%;
        background-color: white;
        z-index: 3000;
    }
    .leftReplyInput{
        background-color: #ddd;
        border-radius: 15px 0 0 15px;
        /*border: 1px solid red;*/
        box-sizing: border-box;
        width: 15%;
        height: 34px;
        overflow: hidden;
        float: left;
    }
    .imgAvatar{
        margin: 4px 0 0 5px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        overflow: hidden;
    }
    .imgAvatar>img{
        width: 100%;
        height: 100%;
    }
    .replyInput{
        float: left;
        width: 80%;
        height: 32px;
        border-radius: 0 15px 15px 0;
        background-color: #ddd;
        border: 0;
        outline: 0;
    }
    .buttomReply span{
        color: #999;
        font-size: 30px;
    }
    >>>.van-button--normal{
        padding: 0;
    }
    >>>.publication{
        line-height: 28px;
        width: 80%;
        background-color: #1989fa;
        color: white;
        margin-top: 2px;
        height: 28px;
        border: 0;
        outline: 0;
        border-radius: 14px;
    }
    >>>.publication span{
        font-size: 16px;
    }
</style>